<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单练习1</title>
    <link rel="stylesheet" href="../CSS/form.css">
</head>
<body>
<div>
    <img src="../img/logo.png" alt="黑马头条">
</div>
<div class="center">
    <div>注册详情
        <hr>
    </div>
    <form action="#" method="get" autocomplete="on">
        <label for="username">姓名:&nbsp;</label>
     <input type="text" id="username" name="username" value="" placeholder="在此输入姓名" required/><br/>

        <label for="password">密码:&nbsp;</label>
        <input type="password" id="password" name="password" value="" placeholder="在此输入密码" required/><br/>

        <label for="email">邮箱:&nbsp;</label>
        <input type="email" id="email" name="email" value="" placeholder="在此输入邮箱" required/><br/>

        <label for="tel">手机:&nbsp;</label>
        <input type="tel" id="tel" name="tel" value="" placeholder="在此输入手机" required/><br/>
        <hr/>
        <div>
            <label for="gender">性别:</label>
            <input type="radio" id="gender" name="gender" value="man" checked />男 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="radio" name="gender" value="woman" />女&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <br/>
        </div>
        <div>
            <label for="hobby">爱好:</label>
            <input type="checkbox" id="hobby" name="hobby" value="miusc" checked/>音乐
            <input type="checkbox" name="hobby" value="games" />游戏
            <input type="checkbox" name="hobby" value="moive" />电影
            <br/>
        </div>
        <div>
            <label for="date">出生日期:</label>
            <input type="date" id="date" name="date"  />
            <br/>
        </div>
        <div>
            <label for="ctiy">所在城市:</label>
            <select name="ctiy" id="ctiy">
            <option value="0">----请选择所在城市----</option>
            <optgroup label="直辖市">直辖市
                <option value="023">重庆</option>
                <option value="021">北京</option>
                <option value="022">上海</option>
                <option value="025">天津</option>
            </optgroup>
            <optgroup label="省会城市">省会城市
                <option value="001">贵阳</option>
                <option value="002">成都</option>
                <option value="003">武汉</option>
                <option value="004">西安</option>
            </optgroup>
            </select>
            <br/>
            <hr/>
        </div>
        <div>
            <label for="desc">个性签名:</label>
            <textarea name="desc" id="desc" cols="40" rows="5" placeholder="请写下你的与众不同"></textarea>
        </div>

        <br/>
        <button type="submit">注册</button>
        <input type="reset" value="重置"/>

    </form>
</div>
</body>
</html>